<template>
	<div class="tui-conversation-list">
		<ActionsMenu v-if="isShowOverlay" :selectedConversation="currentConversation"
			:actionsMenuPosition="actionsMenuPosition" :selectedConversationDomRect="currentConversationDomRect"
			@closeConversationActionMenu="closeConversationActionMenu" />
		<template v-for="(conversation, index) in conversationList">
			<!-- v-if="(conversation.userProfile&&friendListId.indexOf(
	  conversation.userProfile.userID
)!=-1)||(conversation.groupProfile&&groupListId.indexOf(
	  conversation.groupProfile.groupID
)!=-1)" -->

			<div :id="`convlistitem-${index}`" :key="index" :class="[
        'TUI-conversation-content',
        !isPC && 'TUI-conversation-content-h5',
      ]">
				<div @click="enterConversationChat(conversation.conversationID)"
					@longpress="showConversationActionMenu($event, conversation, index)"
					@contextmenu.prevent="showConversationActionMenu($event, conversation, index, true)" :class="[
          isPC && 'isPC',
          'TUI-conversation-item',
          currentConversationID === conversation.conversationID &&
            'TUI-conversation-item-selected',
          conversation.isPinned && 'TUI-conversation-item-pinned',
        ]">
					<aside class="left">
						<!-- (conversation.userProfile&&conversation.userProfile.avatar)||(conversation.groupProfile&&conversation.groupProfile.avatar)||'' -->
						<Avatar useSkeletonAnimation
							:url="(conversation.userProfile&&conversation.userProfile.avatar)||(conversation.groupProfile&&(conversation.groupProfile.avatar ==='https://web.sdk.qcloud.com/im/assets/images/Public.svg'?'https://main-pro.yanchaochao.com/mp-static/96x96.png':conversation.groupProfile.avatar))||''"
							size="50px" />
						<div v-if="userOnlineStatusMap && isShowUserOnlineStatus(conversation)" :class="[
              'online-status',
              Object.keys(userOnlineStatusMap).length > 0 &&
              Object.keys(userOnlineStatusMap).includes(
                conversation.userProfile.userID
              ) &&
              userOnlineStatusMap[conversation.userProfile.userID]
                .statusType === 1
                ? 'online-status-online'
                : 'online-status-offline',
            ]"></div>

						<span class="num" v-if="conversation.unreadCount > 0 && !conversation.isMuted">
							{{
              conversation.unreadCount > 99 ? "99+" : conversation.unreadCount
            }}
						</span>
						<span class="num-notify" v-if="conversation.unreadCount > 0 && conversation.isMuted"></span>
					</aside>
					<div class="content">
						<div class="content-header">
							<label class="content-header-label">
								<p class="name">{{ conversation.getShowName() }}</p>
							</label>
							<div class="middle-box">
								<span class="middle-box-at" v-if="
                  conversation.type === 'GROUP' &&
                  conversation.groupAtInfoList &&
                  conversation.groupAtInfoList.length > 0
                ">{{ conversation.getGroupAtInfo() }}</span>
								<p class="middle-box-content">
									<text v-if="conversation.lastMessage.payload&&conversation.lastMessage.payload.data&&(conversation.lastMessage.payload.data.indexOf('messageForShow')!=-1)">
										{{JSON.parse(conversation.lastMessage.payload.data).messageForShow}}
										
									</text>
									<text v-else>
										{{ conversation.getLastMessage("text")||'打个招呼吧~' }}
									</text>
								</p>
							</div>
						</div>
						<div class="content-footer">
							<span class="time">{{ conversation.getLastMessage("time") }}</span>
							<Icon v-if="conversation.isMuted" :file="muteIcon"></Icon>
						</div>
					</div>
				</div>
			</div>
		</template>
		<div v-if="!conversationList.length">
			<u-empty mode="message"></u-empty>
		</div>
	</div>
</template>

<script lang="ts" setup>
	interface IUserStatus {
		statusType : number;
		customStatus : string;
	}

	interface IUserStatusMap {
		[userID : string] : IUserStatus;
	}

	import { ref,onMounted, onUnmounted } from "../../../adapter-vue";
	import TUIChatEngine, {
		TUIStore,
		StoreName,
		TUIConversationService,
		IConversationModel
	} from "@tencentcloud/chat-uikit-engine";
	import Icon from "../../common/Icon.vue";
	import Avatar from "../../common/Avatar/index.vue";
	import ActionsMenu from "../actions-menu/index.vue";
	import muteIcon from "../../../assets/icon/mute.svg";
	import { isPC, isH5, isUniFrameWork } from "../../../utils/env";
	const emits = defineEmits(["handleSwitchConversation", "getPassingRef"]);
	const currentConversation = ref<IConversationModel>();
	const currentConversationID = ref<string>();
	const currentConversationDomRect = ref<DOMRect>();
	const isShowOverlay = ref<boolean>(false);
	//当前会话列表
	const conversationList = ref<IConversationModel[]>([]);
	//所有会话列表
	const allList = ref<IConversationModel[]>([]);
	const conversationListDomRef = ref<HTMLElement | undefined>();
	const actionsMenuPosition = ref<{ top : number, left ?: number, conversationHeight ?: number }>({
		top: 0,
	});
	const displayOnlineStatus = ref(false); // 在线状态 默认关闭
	const userOnlineStatusMap = ref<IUserStatusMap>();

	let lastestOpenActionsMenuTime : number | null = null;
	let friendListId : any = ref([])
	let groupListId : any = ref([])

	TUIStore.watch(StoreName.FRIEND, {
		friendList: (data) => {
			friendListId.value = data.map(item => item.userID)
		},
	});
	
	TUIStore.watch(StoreName.GRP, {
		groupList: (data) => {
			groupListId.value = data.map(item => item.groupID)
			TUIStore.watch(StoreName.CONV, {
				conversationList: (list : Array<IConversationModel>) => {
					let arr=[]
					list.forEach(item=>{
						console.log(item,"item")
						if((item.groupProfile&&item.groupProfile.groupID&&groupListId.value.indexOf(item.groupProfile.groupID)!=-1)||item.userProfile){
							arr.push(item)
						}
					})
					allList.value = arr;
					conversationList.value = arr;
				
					console.log(allList.value, "所有会话")
				}
			})
		}
	
	});


	TUIStore.watch(StoreName.CONV, {
		currentConversationID: (id : string) => {
			currentConversationID.value = id;
		},
		currentConversation: (conversation : IConversationModel) => {
			currentConversation.value = conversation;
		},
		searchList: (data : { list : Array<IConversationModel>, keyword : string }) => {
			console.log(data, "搜索会话信息")
			if (data?.keyword && data.keyword !== '') {
				conversationList.value = data.list
			} else {
				conversationList.value = allList.value
			}

		},
	});

	// 初始状态
	TUIStore.watch(StoreName.USER, {
		displayOnlineStatus: (status : boolean) => {
			displayOnlineStatus.value = status;
		},
		userStatusList: (list : Map<string, IUserStatus>) => {
			if (list.size !== 0) {
				userOnlineStatusMap.value = [...list.entries()].reduce(
					(obj, [key, value]) => {
						obj[key] = value;
						return obj;
					},
					{} as IUserStatusMap
				);
			}
		},
	});

	const isShowUserOnlineStatus = (conversation : IConversationModel) : boolean => {
		return (
			displayOnlineStatus.value &&
			conversation.type === TUIChatEngine.TYPES.CONV_C2C
		);
	};

	const showConversationActionMenu = (
		event : Event,
		conversation : IConversationModel,
		index : number,
		isContextMenuEvent ?: boolean
	) => {
		if (isContextMenuEvent && isUniFrameWork) {
			return;
		}
		currentConversation.value = conversation;
		lastestOpenActionsMenuTime = Date.now();
		getActionsMenuPosition(event, index);
	};

	const closeConversationActionMenu = () => {
		// 防止连续触发overlay的tap事件
		if (
			lastestOpenActionsMenuTime &&
			Date.now() - lastestOpenActionsMenuTime > 300
		) {
			currentConversation.value = undefined;
			isShowOverlay.value = false;
		}
	};

	const getActionsMenuPosition = (event : Event, index : number, conversation ?: any) => {
		if (isUniFrameWork) {
			if (typeof conversationListDomRef.value === 'undefined') {
				emits('getPassingRef', conversationListDomRef);
			}
			const query = uni.createSelectorQuery().in(conversationListDomRef.value);
			query.select(`#convlistitem-${index}`).boundingClientRect(data => {
				if (data) {
					actionsMenuPosition.value = {
						// uni-h5的uni-page-head不被认为是视窗中的成员，因此手动上head的高度
						top: data.bottom + (isH5 ? 44 : 0),
						left: event.touches[0].pageX,
						conversationHeight: data.height,
					};
					isShowOverlay.value = true;
				}
			}).exec();
		} else {
			// 处理Vue原生
			const rect = event.currentTarget?.getBoundingClientRect();
			if (rect) {
				actionsMenuPosition.value = {
					top: rect.bottom,
					left: isPC ? event.clientX : undefined,
					conversationHeight: rect.height,
				};
			}
			isShowOverlay.value = true;
		}
	};

	const enterConversationChat = (conversationID : string) => {
		emits("handleSwitchConversation", conversationID);
		// TUIConversationService.switchConversation(conversationID);
	};

	// 暴露给父组件，当监听到滑动事件时关闭actionsMenu
	defineExpose({ closeChildren: closeConversationActionMenu, allList: allList.value });
</script>

<style lang="scss" scoped src="./style/index.scss"></style>